<template>
  <div id="app">
    <transition :name=transition>
        <router-view v-show="visible"></router-view>
    </transition>

  </div>
</template>

<script>
import "@/style/common.less"

export default {
  name: 'App',
  components: {},
  data(){
    return{
      visible:true,
      to:null,
      from:null,
      transition:"van-slide-right"
    }
  },
  watch:{
    $route(to,from){
      this.to=to.meta.tree;
      this.from=from.meta.tree;
      if(to.meta.tree>from.meta.tree) this.transition="van-slide-right";
      else if(to.meta.tree<from.meta.tree) this.transition="van-slide-left";
      else this.transition="van-fade";
      // else this.transition="";
    }
  }
}
</script>

<style>

</style>
